<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="site/common::header('研究报告列表')" />
</head>
<body>
    <!-- 头部 -->
    <th:block th:include="site/common::navigation" />
    <!-- 面包屑 -->
    <div class="breadcroumb-area ">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcroumb-title text-center">
                        <h1>研究报告</h1>
                        <h5><a href="/">首页</a>/研究报告</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--内容-->
    <div class="container">
        <div class="row mt-5">
            <div class="col-lg-12 col-md-12 col-12 m-auto">
                <div class="row grid-list" id="report-list">
                    <div class="col-lg-3 col-md-6 col-sm-12 col-12 grid-area" v-for="report in reports">
                        <div class="report-cover mb-4 wow fadeInUp" data-wow-delay=".5s" v-bind:style="{backgroundImage: 'url(' + report.cover + ')'}">
                            <a v-bind:href="'/report/' + report.id" target="_blank">
                                <div class="report-title">{{report.title}}</div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-12 mt-5 mb-5 more">
                    <a href="javascript:;">查看更多</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <th:block th:include="site/common::footer" />
</body>
<th:block th:include="site/common::js" />
<script>
    var page = 1;

    var vm = new Vue({
        el: "#report-list",
        data: {
            reports: []
        },
        mounted: function () {
            loadReports(false);
        }
    });

    $(".more").click(function () {
        page += 1;
        loadReports();
    });

    function loadReports(empty) {
        var url = "/api/report/" + page;
        $.get(url, function (result) {
            if(empty) {
                vm.reports = [];
            }
            if(result.code == 0) {
                for(var i =0; i< result.rows.length; i++) {
                    vm.reports.push(result.rows[i]);
                }
            }
        });
    }
</script>
</html>